import React, { Component } from 'react'

export default class ComSmall extends Component {
    constructor() {
        super();
        this.state = {
            val1: '该交学费了',
            color1: '#56a5f1',
            size1: 20,
            style1: {
                fontWeight: 900,
                fontSize: '40px',
                color: 'blue'
            }
        }
    }
    fn1() {
        // 先在子组件自己的函数中准备好数据 再调用props中的函数 进行子传父
        let val = this.state.val1 + '多交点';
        this.props.tran(val)
    }
    changeBig() {
        //  Cannot assign to read only property 'msg1' of object 
        // read only property  只读数据
        this.props.msg1 = '2p3y423'
    }
    changeColor() {
        let num = this.state.size1;
        this.setState({
            color1: 'red',
            size1: num+6
        })
    }
    render() {
        console.log(this.props);
        return (
            <div>
                <p style={this.state.style1}>一些文字，主要看样式</p>
                <p style={{color: this.state.color1, fontSize: this.state.size1+'px'}}>组件的数据来源——自己的state + 别人的props</p>
                {/* 修改state可以通过setState进行 props是只读属性不能改 */}
                ComSmall,来自父组件的值--{this.props.msg1}
                <button onClick={()=>this.changeColor()}>改字体颜色</button>
                <button onClick={()=>this.changeBig()}>子修改父</button>
                <button onClick={()=>this.props.tran(this.state.val1)}>子传父-简单</button>
                <button onClick={()=>this.fn1()}>子传父-复杂</button>
            </div>
        )
    }
}
